<template>
    <div class="tabbar">
            <div class="tabbar_item" link="/home">
                <img src="https://i.loli.net/2019/11/07/VW7peMzcCsThm2F.png" alt="">
                <p>首页</p>
            </div>
            
            <div class="tabbar_item" link="/about">
                <img src="https://i.loli.net/2019/11/07/Mkh5NiwqZUBVARx.png" alt="">
                <p>好店</p>
            </div>
            <div class="tabbar_item" link="/cart">
               <img src="https://i.loli.net/2019/11/07/RfaIz4oONCl6QKX.png" alt="">
                <p>会员</p>
            </div>
            <div class="tabbar_item" link="/profile">
                <img src="https://i.loli.net/2019/11/07/DcraCzpYsuFJA3O.png" alt="">
                <p>我的</p>
            </div>
        </div>
</template>
<script>
export default {
    
}
</script>
<style lang="less" scoped>
 .tabbar {
            display: flex;
            height: 50px;
            background-color: #FFF;
            text-align: center;
            justify-content: space-around;
            color:#000;
            padding-top: 5px;
            box-sizing: border-box;
            position: fixed;
             bottom: 0;
              width: 100vw;

        }
        .tabbar_item{
            box-sizing: border-box;
            img{
                width: .24rem;
                height: .24rem;
            }

        }
        .tabbar .tabbar_item p{
            
            font-size: 12px;
        }
        .tabbar_item span{
            /* display: inline-block; */
            display: block;
            width: 24px;
            height: 25px;
            /* background-color: aqua; */
            // background-image:url('./images/icons.png');
            background-size: 99px 300px;
            box-sizing: border-box;
        }
        
        .tabbar_item:hover p{
            color: #ffbd00;
        }
       
</style>